<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> 
<head>
<%@ include file="../../include/easyui.jsp" %>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>流程图-导出图片</title>
    <!--[if lt IE 9]>
    <?import namespace="v" implementation="#default#VML" ?>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/plug-in/GooFlow1.1/codebase/GooFlow.css"/>
    <script type="text/javascript" src="data2.js"></script>
    <script type="text/javascript" src="/plug-in/GooFlow1.1/plugin/jquery.min.js"></script>
    <script type="text/javascript" src="/plug-in/GooFlow1.1/codebase/GooFunc.js"></script>
    <script type="text/javascript" src="/plug-in/GooFlow1.1/plugin/json2.js"></script>
    <script type="text/javascript" src="/plug-in/GooFlow1.1/codebase/GooFlow.js"></script>
    <script type="text/javascript" src="/plug-in/GooFlow1.1/codebase/GooFlow.color.js"></script>

    <script type="text/javascript" src="/plug-in/GooFlow1.1/plugin/promise.min.js"></script>
    <script type="text/javascript" src="/plug-in/GooFlow1.1/plugin/html2canvas.min.js"></script>
    <!--[if lte IE 11]-->
    <script type="text/javascript" src="/plug-in/GooFlow1.1/plugin/canvg.js"></script>
    <!--[endif]-->
    <script type="text/javascript" src="/plug-in/GooFlow1.1/codebase/GooFlow.export.js"></script>
<style>
.myForm{display:block;margin:0px;padding:0px;line-height:1.5;border:#ccc 1px solid;font: 12px Arial, Helvetica, sans-serif;margin:5px 5px 0px 0px;border-radius:4px;}
.myForm .form_title{background:#428bca;padding:4px;color:#fff;border-radius:3px 3px 0px 0px;}
.myForm .form_content{padding:4px;background:#fff;}
.myForm .form_content table{border:0px}
.myForm .form_content table td{border:0px}
.myForm .form_content table .th{text-align:right;font-weight:bold}
.myForm .form_btn_div{text-align:center;border-top:#ccc 1px solid;background:#f5f5f5;padding:4px;border-radius:0px 0px 3px 3px;} 
</style>
<title>流程设计</title>
<script>
/*当前流程主键*/
var flowId = '${param.flowId}';
var property={
     width:900,
     height:500,
     toolBtns:["start round mix","end round","task","node","chat","state","plug","join","fork","complex mix"],
     haveHead:true,
     headLabel:true,
     headBtns:["new","open","save","undo","redo","reload","print"],//如果haveHead=true，则定义HEAD区的按钮
     haveTool:true,
     haveGroup:true,
     useOperStack:true,
     remark:{
        cursor:"选择指针",
        direct:"结点连线",
        start:"入口结点",
        end:"结束结点",
        task:"任务结点",
        node:"自动结点",
        chat:"决策结点",
        state:"状态结点",
        plug:"附加插件",
        fork:"分支结点",
        join:"联合结点",
        complex:"复合结点",
        group:"组织划分框编辑开关"
    }
 };
 $(function(){
	 var design = $.createGooFlow($("#demo"),property);
	 design.setNodeRemarks(property.remark);
	 design.loadData({});

	 $.extend(design,{
		//导出图片功能 END
		 onPrintClick: function(){
			 this.exportDiagram("流程设计图打印");
		 },
		 onBtnSaveClick:function(){
			 var data = this.exportData();
			 //console.log(JSON.stringify(data));
			 $.getJSON('/console/jFormFlow/rewrite/designSave', {'flowId':flowId,jsonData: JSON.stringify(data)}, function(result){
				if(result && result.flag){
					alert('设计保存成功');
				}
			 });
		 },
		 onFreshClick:function(){
			 var _this = this;
			 $.getJSON('/console/jFormFlow/rewrite/getJson', {'flowId':flowId}, function(json){
				if(json && json.data){
					_this.setTitle(json.data.flowName + '-在线设计');
					$("input[name=exportName]").val(json.data.flowName);
					$("#flowName").val(json.data.flowName);
				}
				if(json && json.data && json.data.flowJson){
					var flowJson = json.data.flowJson || {} ;
					flowJson = JSON.parse(flowJson);
					_this.loadData(flowJson);
				}
			 });
		 },
		 onItemFocus: function(id,model){
			 var obj;
		      if(model=="line"){
		        obj=this.$lineData[id];
		        $("#node_model").val(model);
		    	$("#node_id").val(id);
		        $("#node_type").val(obj.type);
		        $("#node_left").val("");
		        $("#node_top").val("");
		        $("#node_width").val("");
		        $("#node_height").val("");
		        $("#node_from").val(obj.from);
		        $("#node_to").val(obj.to);
		        $("#node_name").val(obj.name);
		        $(".node_content input").val('');
		      }else if(model=="node"){
		        obj=this.$nodeData[id];
		        $("#ele_model").val(model);
			    $("#ele_id").val(id);
		        $("#ele_type").val(obj.type);
		        $("#ele_left").val(obj.left);
		        $("#ele_top").val(obj.top);
		        $("#ele_width").val(obj.width);
		        $("#ele_height").val(obj.height);
		        $("#ele_from").val("");
		        $("#ele_to").val("");
			    $("#ele_name").val(obj.name);
			    $(".line_content input").val('');
		      }
		      return true;
		 }
	 });
	 
	 $("#demo .GooFlow_head .ico_reload").click();
	 
 });
</script>
</head>
<body  class="easyui-layout">
	<input type="hidden"  name="exportName" value="流程图打印预览"  />
	
	<div region="center" border="false">
		<div id="demo" style="margin:10px"></div>
		<div id="fff"></div>
	</div>
	
	<div data-options="region:'east',iconCls:'icon-reload',title:'流程节点参数',split:true" style="width:300px;">
		
		<div class="easyui-panel" title="流程图属性"  style="width:250px;height:150px;padding:10px;background:#fafafa;">   
	       <div class="form_content">
			  <table>
			    <tr><td class="th">名称：</td><td><input type="text" style="width:120px" id="flowName"/></td></tr>
			    <tr><td class="th">高度：</td><td><input type="text" style="width:120px" id="flowHeight" value="500"/></td></tr>
			    <tr><td class="th">宽度：</td><td><input type="text" style="width:120px" id="flowWidth" value="900" /></td></tr>
			  </table>
			</div>         
		</div>  
		
		<div class="easyui-panel" title="流程节点属性"  style="width:250px;height:250px;padding:10px;background:#fafafa;">   
			<div class="form_content node_content">
			  <table>
			    <tr><td class="th">主键：</td><td><input type="text" style="width:120px" id="ele_id"/></td></tr>
			    <tr><td class="th">名称：</td><td><input type="text" style="width:120px" id="ele_name"/></td></tr>
			    <tr><td class="th">类型：</td><td><input type="text" style="width:120px" id="ele_type"/></td></tr>
			    <tr><td class="th">模型：</td><td><input type="text" style="width:120px" id="ele_model"/></td></tr>
			    <tr><td class="th">左偏移：</td><td><input type="text" style="width:120px" id="ele_left"/></td></tr>
			    <tr><td class="th">右偏移：</td><td><input type="text" style="width:120px" id="ele_top"/></td></tr>
			  </table>
			</div>
		</div>
		
		<div class="easyui-panel" title="连线属性"  style="width:250px;height:250px;padding:10px;background:#fafafa;">   
			<div class="form_content line_content">
			  <table>
			    <tr><td class="th">主键：</td><td><input type="text" style="width:120px" id="node_id"/></td></tr>
			    <tr><td class="th">名称：</td><td><input type="text" style="width:120px" id="node_name"/></td></tr>
			    <tr><td class="th">类型：</td><td><input type="text" style="width:120px" id="node_type"/></td></tr>
			    <tr><td class="th">模型：</td><td><input type="text" style="width:120px" id="node_model"/></td></tr>
			    <tr><td class="th">起点：</td><td><input type="text" style="width:120px" id="node_from"/></td></tr>
			    <tr><td class="th">终点：</td><td><input type="text" style="width:120px" id="node_to"/></td></tr>
			  </table>
			</div>
		</div>
	</div> 
</body>
</html>